<template>
  <div class="app-container">
    <div>
      <el-select v-model="value1" placeholder="请选择" @change="getData">
        <el-option
          v-for="item in students"
          :key="item.id"
          :label="item.username"
          :value="item.username"
        />
      </el-select>

      <el-select
        v-model="value2"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择"
        @change="getData"
      >
        <el-option
          v-for="item in courses"
          :key="item.id"
          :label="item.coursename"
          :value="item.coursename"
        />
      </el-select>

      <el-select v-model="value3" placeholder="请选择" @change="getData">
        <el-option
          v-for="item in clazzs"
          :key="item.id"
          :label="item.classname"
          :value="item.classname"
        />
      </el-select>

      <el-select
        v-model="value4"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择"
        @change="getData"
      >
        <el-option
          v-for="item in exams"
          :key="item.id"
          :label="item.examname"
          :value="item.examname"
        />
      </el-select>

      <el-button type="primary" size="mini" style="margin-left: 20px" @click="resetSelect()">重置</el-button>
      <el-button type="primary" size="mini" @click="dialogVisible = true">新增</el-button>
      <el-dialog
        title="打分"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :label-position="labelPosition" label-width="80px" >
          <el-form-item label="学生">
            <el-select v-model="v1" collapse-tags style="margin-left: 20px;" placeholder="请选择" >
              <el-option
                v-for="item in students"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="课程">
            <el-select
              v-model="v2"
              collapse-tags
              style="margin-left: 20px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in courses"
                :key="item.id"
                :label="item.coursename"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考试">
            <el-select
              v-model="v3"
              collapse-tags
              style="margin-left: 20px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in exams"
                :key="item.id"
                :label="item.examname"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分数">
            <el-input type="number" style="margin-left: 20px;width: 200px" v-model="v4"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveData()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="索引" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="课程">
        <template slot-scope="scope">
          {{ scope.row.course }}
        </template>
      </el-table-column>
      <el-table-column label="考试" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.exam }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.clazz }}
        </template>
      </el-table-column>
      <el-table-column label="成绩" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.grades }}
        </template>
      </el-table-column>
      <el-table-column label="学生姓名" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.studentName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">
<!--          <el-button type="primary" icon="el-icon-edit" size="mini" round style="margin-right: 10px" />-->
          <el-button slot="reference" size="mini" round type="danger" icon="el-icon-delete" @click="open(scope.row.id)"/>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      visible: false,
      students: [],
      courses: [],
      clazzs: [],
      exams: [],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      v1: '',
      v2: '',
      v3: '',
      v4: '',
      dialogVisible: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteItem(id).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            return
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async saveData() {
      this.listLoading = true
      const [err] = await this.$request('http://localhost:8081/grades/save',
        {
          'userId': this.v1,
          'courseid': this.v2,
          'examid': this.v3,
          'grades': this.v4
        },
        'post',
        'params'
      )
      if (err) {
        return this.$message.error(err.data.msg)
      }
      this.dialogVisible = false
      await this.getData()
      this.listLoading = false
      this.v1 = ''
      this.v2 = ''
      this.v3 = ''
      this.v4 = ''
    },
    async getData() {
      this.listLoading = true
      const [err, res] = await this.$request('/grades/page',
        {
          'student': this.value1,
          'course': this.value2,
          'clazz': this.value3,
          'exam': this.value4
        },
        'get',
        'params'
      )
      if (err) {
        return this.$message.error(err.data.msg)
      }
      this.list = res.result.list
      await this.getCourses()
      await this.getStudents()
      await this.getClazzs()
      await this.getExams()
      this.listLoading = false
    },
    async getStudents() {
      const [err, res] = await this.$request('/user/page',
        {
          'identity': 0
        },
        'get',
        'params'
      )
      console.log(res)
      if (err) {
        return this.$message.error(err.data.msg)
      }
      this.students = res.result.list
    },
    async getCourses() {
      const [err, res] = await this.$request('/course/page')
      if (err) {
        return this.$message.error(err.data.msg)
      }
      this.courses = res.result.list
    },
    async getClazzs() {
      const [err, res] = await this.$request('/class/page')
      if (err) {
        return this.$message.error(err.data.msg)
      }
      this.clazzs = res.result.list
    },
    async getExams() {
      const [err, res] = await this.$request('/exam/page')
      if (err) {
        return this.$message.error(err.data.msg)
      }
      this.exams = res.result.list
    },
    async deleteItem(id) {
      const [err, res] = await this.$request('http://localhost:8081/grades/delete',
        { 'ids': [id] },
        'post',
        'params')
      if (err) {
        return this.$message.error(err.data.msg)
      }
      if (res.code === 200) this.$message.success('删除成功')
      await this.getData()
    },
    resetSelect() {
      this.value1 = ''
      this.value2 = ''
      this.value3 = ''
      this.value4 = ''
      this.getData()
    }
  }
}
</script>
